<template>
  <el-dialog title="设置角色" :visible="isShowDialog" @close="closeFn">
    <!-- 多选框组 -->
    <el-checkbox-group v-model="checkedRole">
      <!--
            对于 checkbox 来说，被绑定的值叫  label，如果显示的内容不一样
            可以放在开闭标签之间的插槽里面，这个地方需要绑定的值是 id，看到的是 name
         -->
      <el-checkbox v-for="item in roleLists" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <el-row type="flex" justify="center">
      <el-button @click="closeFn">取消</el-button>
      <el-button type="primary" @click="OKbtn">确定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { roleList } from '@/api/roles'
import { getUserDetail } from '@/api/user'
import { assginRole } from '@/api/employees'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      roleLists: [],
      checkedRole: [],
      userId: ''
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    // 关闭弹窗
    closeFn() {
      this.checkedRole = []
      this.$emit('update:isShowDialog', false)
    },
    async OKbtn() {
      // 发送请求
      await assginRole({ id: this.userId, roleIds: this.checkedRole })
      // 提示用户
      this.$message.success('操作成功')
      // 关闭弹窗
      this.$emit('update:isShowDialog', false)
    },
    async getRoleList() {
      const { rows } = await roleList()
      this.roleLists = rows
    },
    // 回显数据的函数，可以讲点击那个员工的数据回显在当前的弹窗组件中，
    // 但是触发不是在这，需要父组件点击弹窗那一刻触发
    async getRole(id) {
      this.userId = id
      // 回显时，获取员工的数据，拿出里面的角色列表部分，赋值到当前的 data
      const { roleIds } = await getUserDetail(id)
      this.checkedRole = roleIds
    }
  }
}
</script>

<style>

</style>
